<!DOCTYPE html>
<html>
<head>
    <title>自定义指令</title>
     <script src="../js/vue.min.js"></script> 
</head>
<body>
    <!-- Your HTML code goes here -->
    <div id="root">
        <!-- <h2 :style="{opacity: opacity}">Hello, World</h2> -->
        <h2 :style="{opacity}">Hello, World</h2> <!-- 简写 -->
    </div>
</body>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            opacity:1
        },
        // Vue初次完成模版渲染之后, 不包含后续的更新操作, 执行mounted函数
        mounted() { //挂载, 声明周期函数
            setInterval(() => {  // es6箭头函数实现
                if(this.opacity > 0){ //this 是vm 实例 或者 组件实例
                    this.opacity -= 0.01
                }else{
                    this.opacity = 1
                }
            }, 16)
        },
    })

    // setInterval(function(){  // js原生实现
    //     if(vm.opacity > 0){
    //         vm.opacity -= 0.01
    //     }else{
    //         vm.opacity = 1
    //     }
    // }, 16)

</script>
</html>
